<template>
	<view class="content">
		<nav-bars bgColor="transparent" fontColor="#101010"></nav-bars>
		<view class="TopBg">
			<view class="title">样板间征集</view>
			<text class="tips">此活动需提供一下信息便于更好的为客户服务</text>
			<view class="form">
				<view class="formItem">
					<view class="formlab">姓名</view>
					<input type="text" v-model="name" placeholder="请输入您的姓名" placeholder-style='color:#717171;' class="inputstyle"/>
				</view>
				<view class="formItem">
					<view class="formlab">联系方式</view>
					<input type="text" v-model="mobile" placeholder="请输入您的手机号" placeholder-style="color:#717171" class="inputstyle"/>
				</view>
				<view class="formItem">
					<view class="formlab">小区</view>
					<view class="addressbox">
						<input type="text" v-model="estate" :placeholder="maplocal" placeholder-style="color:#717171" style="color: #717171;"/>
						<view class="imagebox" @click="mapFunc"><image :src="`${imageSrc}/static/distri/estateIcon.png`"></image></view>
					</view>
					
				</view>
			</view>
			<view class="house">
				<view class="formlab">户型选择</view>
				<view class="houseItem">
					<view :class="['TabsItem',current == index?'TabsIndex':'']" @click="TabsChange(item,index)" v-for="(item,index) in RoomList" :key="item.id">{{item.name}}</view>
				</view>
				<view class="submitBtn" @click="submitFuc">提交</view>
			</view>
		</view>
	</view>
</template>
<script>
	import service_design from '@/service/design'
	export default {
		name: 'sample',
		components: {
			
		},
		data() {
			return {
				imageSrc: this.$static,
				current: -1,
				RoomList: [{
				    id: 0,
				    name: '一室一厅'
				}, {
				    id: 1,
				    name: '二室一厅'
				}, {
				    id: 2,
				    name: '二室二厅'
				}, {
				    id: 3,
				    name: '三室一厅'
				}, {
				    id: 4,
				    name: '三室二厅'
				}, {
				    id: 5,
				    name: '四室一厅'
				}, {
				    id: 6,
				    name: '四室二厅'
				}, {
				    id: 7,
				    name: '复式'
				}],
				name:'',
				mobile:'',
				estate:'',
				house_type:'',
				maplocal:'',
			};
		},
		onLoad(options) {
			this.$utils.getUrl();
		},
		computed: {},
		created() {},
		mounted() {},
		methods: {
			TabsChange(item, index) {
			    let that = this
			    that.current = index
				this.house_type = item.name
			},
			mapFunc(){
				let that = this
				uni.chooseLocation({
					success: function (res) {
						that.maplocal = res.name
						that.estate = res.name
					}
				});
			},
			submitFuc(){
				let that = this
				if(!that.name){
					uni.showToast({ title: '请输入姓名', icon: 'none' });
					return
				}
				let phonenum = /^1[23456789]\d{9}$/.test(this.mobile);
				if(!that.mobile){
					uni.showToast({ title: '请输入手机号', icon: 'none' });
					return
				}
				if(!phonenum){
					uni.showToast({ title: '请输入正确的手机号码', icon: 'none' });
					return
				}
				if(!that.estate){
					uni.showToast({ title: '请选择或输入小区地址', icon: 'none' });
					return
				}
				if(!that.house_type || that.current == -1){
					uni.showToast({ title: '请选择户型', icon: 'none' });
					return
				}
				
				
				let params = {
					user_id: uni.getStorageSync('userId'),
					market_id: uni.getStorageSync('Marketid') || 1,//卖场id
					name: that.name,
					mobile: that.mobile,
					estate: that.estate,
					house_type: that.house_type
				}
				service_design.samplecollect(params).then(res=>{
					console.log(res)
					if(res.code==1){
						uni.showToast({
							title:'提交成功',
							icon:'success'
						})
						setTimeout(function(){
							uni.switchTab({
								url: '/pages/home/index/index'
							})
						}, 1500);
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none'
						})
					}
				})
			}
		},
	};
</script>
<style lang="scss" scoped>
	.content{
		.TopBg{
			width: 100%;
			height: 360rpx;
			position: absolute;
			top: 0;
			left: 0;
			z-index: -1;
			background: linear-gradient(180deg, #FFF7E8 0%, #FFFFFF 100%);
			.title{
				margin-top: 222rpx;
				margin-bottom: 8rpx;
				color: #2D261A;
				font: bold 38rpx/53rpx PingFang SC;
				padding-left: 28rpx;
			}
			.tips{
				display: inline-block;
				font: 500 26rpx/37rpx PingFang SC;
				color: #717171;
				padding-left: 28rpx;
			}
			.form{
				padding-top: 108rpx;
				background: #FFFFFF;
				padding: 108rpx 31rpx 40rpx 39rpx;
				.formItem{
					display: flex;
					align-items: center;
					margin-bottom: 42rpx;
					.formlab{
						text-align: right;
						margin-right: 40rpx;
						width: 120rpx;
						font: bold 30rpx/42rpx PingFang SC;
						color: #252525;
					}
					.inputstyle{
						width: 519rpx;
						height: 100rpx;
						color: #717171;
						border-bottom: 1rpx solid #DFDFDF;
					}
					.addressbox{
						width: 518rpx;
						height: 100rpx;
						background: #F8F8F8;
						border-radius: 12rpx;
						display: flex;
						align-items: center;
						justify-content: space-between;
						padding: 0 26rpx;
						.imagebox{
							width: 50rpx;
							height: 100rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							image{
								width: 36rpx;
								height: 44rpx;
							}
						}
						
					}
				}
			}
			.house{
				margin-top: 24rpx;
				background: #FFFFFF;
				padding: 41rpx 28rpx;
				.formlab{
					font: bold 30rpx/42rpx PingFang SC;
					color: #252525;
				}
				.houseItem{
					display: grid;
					grid-template-columns: repeat(3, 1fr);
					grid-gap: 0.5rem;
					margin-top: 24rpx;
					.TabsItem{
						width: 214rpx;
						padding: 14rpx 0;
						background: #F8F8F8;
						border-radius: 8px;
						font: 500 28rpx/40rpx PingFang SC;
						color: #717171;
						margin-bottom: 22rpx;
						text-align: center;
					}
					.TabsIndex{
						background: #F99704;
						color: #FFFFFF;
					}
				}
				
			}
			.submitBtn{
				margin: 0 auto;
				width: 540rpx;
				color: #FFFFFF;
				font: 500 32rpx/45rpx PingFang SC;
				background: linear-gradient(129deg, #FEA62B 0%, #F29100 100%);
				border-radius: 46rpx;
				padding: 23rpx 0rpx;
				text-align: center;
				margin-top: 215rpx;
			}
		}
	}
</style>
